<template>
  <div class="container">
    <!-- 基础题库 -->
    <div class="app-container">
      <el-card shadow="never">
        <!-- ◆头部新增题库按钮区域 -->
        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            @click="addNewQuestionHandler"
            class="el-button el-button--success el-button--small"
            ><i class="el-icon-edit"></i><span>新增试题</span></el-button
          >
        </div>
         <!-- ◆表单筛选区域 -->
        <el-form ref="filterRef" class="filterform-style" :model="filterForm">
          <el-form-item
            label="学科"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select
              @change="subjChangeHandler"
              v-model="filterForm.subjectID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in subject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="二级目录"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select v-model="filterForm.catalogID" placeholder="请选择">
              <el-option
                v-for="item in catalog"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="标签"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select v-model="filterForm.tags" placeholder="请选择">
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="关键字"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-input
              v-model="filterForm.keyword"
              type="text"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="试题类型"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select v-model="filterForm.questionType" placeholder="请选择">
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="难度"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select v-model="filterForm.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="方向"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select v-model="filterForm.direction" placeholder="请选择">
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="录入人"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select v-model="filterForm.creatorID" placeholder="请选择">
              <el-option
                v-for="item in creator"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="题目备注"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-input type="text" v-model="filterForm.remarks"></el-input>
          </el-form-item>
          <el-form-item
            label="企业简称"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-input type="text" v-model="filterForm.shortName"></el-input>
          </el-form-item>
          <el-form-item
            label="城市"
            style="height: 50px; width: 25%"
            label-width="80px"
          >
            <el-select
              v-model="filterForm.province"
              placeholder="请选择"
              style="width: 50%"
              @change="cityChangeHandler"
            >
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="filterForm.city"
              placeholder="请选择"
              style="width: 50%"
            >
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            style="height: 50px; width: 25%; text-align: right"
            label-width="80px"
          >
            <el-button
              class="el-button el-button--default el-button--small"
              @click="clearFilterHandler"
              >清除</el-button
            >
            <el-button
              class="el-button el-button--primary el-button--small"
              @click="searchQuesHandler"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- ◆显示消息几条区域 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- ◆表格区域 -->
        <el-table
          :key="baseList.id"
          :data="baseList"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column align="center" label="试题编号">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subject }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目录">
            <template slot-scope="scope">
              <span>{{ scope.row.catalog }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题型">
            <template slot-scope="scope">
              <span>{{ questionTypeHandler(scope.row.questionType) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="题干">
            <template slot-scope="scope">
              <span>{{ (scope.row.question) }}</span>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="题干">
            <template slot-scope="scope">
              <span>{{ html2TextHandler(scope.row.question) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间" width="200">
            <template slot-scope="scope">
              <span>{{ formData(scope.row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度">
            <template slot-scope="scope">
              <span>{{ difficultyHandler(scope.row.difficulty) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{ scope.row.creator }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <div class="cell">
                <!-- 预览试题按钮 -->
                <el-button
                  class="el-button el-button--primary el-button--small is-plain is-circle"
                  title="预览"
                  @click="prevQuestionHandler(scope.row)"
                  ><i class="el-icon-view"></i
                ></el-button>
                <!-- 修改试题按钮 -->
                <el-button
                  class="el-button el-button--success el-button--small is-plain is-circle"
                  title="修改"
                  @click="editQuestionHandler(scope.row)"
                  ><i class="el-icon-edit"></i
                ></el-button>
                <!-- 删除试题按钮 -->
                <el-button
                  class="el-button el-button--warning el-button--small is-plain is-circle"
                  title="删除"
                  @click="delQuestionHandler(scope.row)"
                  ><i class="el-icon-delete"></i
                ></el-button>
                <!-- 加入精选题库按钮 -->
                <el-button
                  class="el-button el-button--danger el-button--small is-plain is-circle"
                  title="加入精选"
                  @click="addChoiceHandler(scope.row)"
                  ><i class="el-icon-check"></i
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- ◆分页组件 -->
        <div class="pagination">
          <PageTools
            :paginationPage="requestParams.page"
            :paginationPagesize="requestParams.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTools>
        </div>
      </el-card>
      <!-- ◆预览对话框组件 -->
      <!-- <el-Dialog :visible.sync="PreviewDiaVisible">
        <PreviewDia v-if="PreviewDiaVisible"></PreviewDia>
      </el-Dialog> -->
      <el-Dialog :visible.sync="PreviewDiaVisible" title="题目预览" @closed="closePreviewHandler">
        <div>
          <div  class="prevheader-style" >
            <span >【题型】：{{questionTypeHandler(previeList.questionType)}}</span>
            <span >【编号】：{{previeList.id}}</span>
            <span >【难度】：{{difficultyHandler(previeList.difficulty)}}</span>
            <span >【标签】：{{previeList.tags}}</span>
            <span >【学科】：{{previeList.subjectName}}</span>
            <span >【目录】：{{previeList.directoryName}}</span>
            <span >【方向】：{{previeList.direction}}</span>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>
            <p>【题干】: </p>
            <p style="color:blue">{{html2TextHandler(previeList.question)}}</p>
            <p >{{questionTypeHandler(previeList.questionType)}}题 选项：(以下选中的答案为正确答案)</p>
          </div>
          <div>
             <div  v-for="(item,index) in previeList.options" :key="index">
                 <el-checkbox v-model="item.isRight"  disabled :checked="Boolean(item.isRight)" >{{item.code}}.{{item.title}}</el-checkbox>
            </div>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>
            <div style="margin-bottom:20px">
              <span>【参考答案】：</span
              ><el-button class="el-button el-button--danger el-button--small"
              @click="showVideo=!showVideo"
                ><span>视频答案预览</span></el-button
              >
            </div>
            <div v-if="showVideo" class="video-style" ><video  :src="previeList.videoURL"  autoplay controls></video></div>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>【答案解析】: {{html2TextHandler(previeList.answer)}}</div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>【题目备注】: {{previeList.remarks}}</div>
          <div style="text-align:right">
            <el-button class="el-button el-button--primary el-button--medium"
            @click="PreviewDiaVisible=false"
              >关闭</el-button
            >
          </div>
        </div>
      </el-Dialog>
    </div>
  </div>
</template>

<script>
// 导入基础题库、删除题库的、题库详情、加入精选 API
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions'
// 下包 dayjs 并导入 用于（格式化时间）
import dayjs from 'dayjs'
// 导入 html 转 text 的工具函数
import { html2Text } from '@/utils'
// 导入 分页组件
import PageTools from '@/module-hmmm/components/PageTools/page-tools.vue'
// 导入预览基础试题题库的对话框
// import PreviewDia from '@/module-hmmm/components/questions-preview.vue'
// 导入循环城市和地区的函数
import { provinces, citys } from '@/api/hmmm/citys'
// 导入 难度、题型、方向数据(筛选需要)
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 导入 获取简单学科数据的接口函数
import { subjSimple } from '@/api/hmmm/subjects'
// 导入 获取录入人列表的接口函数
import { userSimple } from '@/api/base/users'
// 导入获取标签的简单列表的接口函数
import { tagSimple } from '@/api/hmmm/tags'
// 导入获取二级目录列表的接口函数
import { cataSimple } from '@/api/hmmm/directorys'
export default {
  components: {
    // 注册分页组件
    PageTools
    // 注册预览对话框组件
    // PreviewDia
  },
  data () {
    return {
      // 定义基础题库数组变量
      baseList: [],
      total: 0,
      alertText: '',
      requestParams: {
        page: 1,
        pagesize: 10
      },
      filterForm: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        keyword: '', // 关键字
        creatorID: '', // 录入人
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        direction: '', // 方向
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: '' // 区域
      },
      previeList: {
        // id: '',
        // question: '',
        // questionType: '',
        // videoURL: '',
        // subjectName: '',
        // difficulty: '',
        // options: [],
        // tags: '',
        // directoryName: '',
        // direction: '',
        // answer: '',
        // remarks: ''

      }, // 预览详情数据
      subject: [], // 学科列表数组
      catalog: [], // 二级目录列表数据
      tags: [], // 标签列表数组
      difficulty, // 试题难度数组
      questionType, // 试题类型数组
      direction, // 试题方向数组
      creator: [], // 录入人数组
      provinces: [], // 省市数组
      citys: [], // 对应的区域数组
      PreviewDiaVisible: false, // 是否显示预览对话框
      showVideo: false // 是否预览视频答案
    }
  },
  created () {
    // ◆触发 methods 中的 下载基础题库的 函数
    this.loadBaseQuestionList()
    // console.log(html2Text('<p>你好</p>'))// 测试 HTML 转 text
    // ◆触发 methods 中的 下载省市的 函数
    this.loadProvincesHandler()
    // ◆触发 methods 中的 下载学科列表的函数
    this.loadSubjectHandler()
    // ◆触发 methods 中的 下载用户简单信息的函数(获取录入人)
    this.loadUserHandler()
  },
  methods: {
    //  ◆下载基础题库列表
    loadBaseQuestionList () {
      list(this.requestParams)
        .then(({ data: res }) => {
          console.log(res)
          this.baseList = res.items
          console.log(this.baseList, '基础数据9999')
          this.total = res.counts
          this.alertText = `共 ${this.total} 条记录`
        })
        .catch((e) => {
          console.log(e)
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    // ◆封装格式化时间函数
    formData (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // ◆封装试题类型转化函数
    questionTypeHandler (num) {
      if (Number(num) === 1) {
        return '单选'
      } else if (Number(num) === 2) {
        return '多选'
      } else if (Number(num) === 3) {
        return '简答'
      }
    },
    // ◆封装试题难度转化函数
    difficultyHandler (num) {
      if (Number(num) === 1) {
        return '简单'
      } else if (Number(num) === 2) {
        return '一般'
      } else if (Number(num) === 3) {
        return '困难'
      }
    },
    // ◆定义HTML 转 text 的函数(题干函数)
    html2TextHandler (html) {
      return html2Text(html)
    },
    // ◆当前点击了第几页，发生改变
    handleCurrentChange (currentChange) {
      // console.log(currentChange, '点击了第几页')
      // 1.修改当前页码
      this.requestParams.page = currentChange
      // 2.重新更新基础题库列表
      this.loadBaseQuestionList()
    },
    // ◆每页显示条数发生了改变
    handleSizeChange (siseChange) {
      // console.log(siseChange, '点击了每页显示几条')
      // 1.修改每页显示几条
      this.requestParams.pagesize = siseChange
      // 2.默认显示第一页
      this.requestParams.page = 1
      // 3.重新更新基础题库列表
      this.loadBaseQuestionList()
    },
    // ◆点击了预览试题详情
    async prevQuestionHandler (row) {
      console.log(row, 888888)
      // 1.展示预览弹框
      this.PreviewDiaVisible = true
      // 2.发送ajax，获取详情
      const { data: res } = await detail(row)
      console.log(res, '基础题库详情333')
      this.previeList = res
      // console.log(this.previeList.subjectName, '0000')
      // 3.父传子(把基础试题详情传给子组件）)
      // await this.$nextTick(() => {
      //   this.$refs.PreviewRef.previewData = res.data
      //   console.log(res.data, 111111)
      // })
    },
    // ◆点击了关闭预览
    closePreviewHandler () {
      this.PreviewDiaVisible = false
      this.showVideo = false
    },
    // ◆点击删除基础试题
    delQuestionHandler (row) {
      // console.log(id, '点我删除题库')
      // 1.弹出删除提示框
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 2.确认删除发送ajax
          const res = await remove(row)
          console.log(res, '删除题库啦')
          // 3.判断
          if (res.status === 200) {
            // 4.删除成功提示
            // this.$message.success(res.message)？？？为什么这个不型
            this.$message({
              type: 'success',
              message: '删除试题成功'
            })
            // 6.删除优化◆
            if (this.baseList.length === 1 && this.requestParams.page > 1) {
              this.requestParams.page--
            }
            // 5.重新更新基础题库列表
            this.loadBaseQuestionList()
            console.log('123')
          } else {
            // 6.删除失败提示
            // this.$message.error(res.message)？？？为什么这个不行
            this.$message({
              type: 'error',
              message: '删除试题失败'
            })
          }
        })
        .catch(() => {
          // 7.取消删除可以不作提示
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    // ◆◆◆点击编辑基础试题，跳入录入试题
    editQuestionHandler (row) {
      console.log(row, '跳到录入试题对话框')
      // 跳到录入试题页面准备编辑(路由跳转)
      this.$router.push({ name: 'questions-new', query: { id: row.id } })
      // 后面由裴雨轩做
    },
    // ◆◆◆点击新增基础题库
    addNewQuestionHandler () {
      // 跳到录入试题页面准备新增(路由跳转)
      this.$router.push({ name: 'questions-new' })
      // 后面由裴雨轩做
    },
    // ◆点击加入精选题库
    async  addChoiceHandler (row) {
      // console.log(row)
      console.log(row)
      // 发送ajajx (要移入精选，证明 choiceState 的初始值是 1)
      // 1.弹出提示框
      this.$confirm('此操作将移入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 2.发送ajajx（注意传的参数）
        const res = await choiceAdd({ id: row.id, choiceState: 1 })
        console.log(res, '加入精选123')
        if (res.status === 200) {
          // 3.移入精选成功
          this.$message({
            type: 'success',
            message: '移入精选成功!'
          })
          // 4.重新更新基础题库列表
          this.loadBaseQuestionList()
        } else {
          // 5.移入精选失败
          this.$message({
            type: 'info',
            message: '移入精选失败!'
          })
        }
      }).catch(() => {
        // 7.取消移入精选不做处理
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // ◆获取省市列表的函数
    loadProvincesHandler () {
      this.provinces = provinces()
      console.log(this.provinces, 9999999912)
    },
    // ◆获取对应区域列表的函数(触发城市的 change 事件，才会出来区域)
    cityChangeHandler () {
      // 1.赋值给省市对应的区域
      this.citys = citys(this.filterForm.province)
    },
    // ◆获取学科列表函数
    async loadSubjectHandler () {
      // 1.发送ajax ,获取学科列表
      const res = await subjSimple()
      console.log(res, '00000')
      // 2.赋值给学科列表
      this.subject = res.data
    },
    // ◆ 获取二级目录列表(触发了学科的 change 事件才可能会有二级目录)
    changeCataLogHandler () {},
    // ◆获取录入人列表的函数
    async loadUserHandler () {
      // 1.发送ajax
      const { data: res } = await userSimple(this.filterForm.keyword)
      console.log(res, '获取录入人11')
      // 2.赋值给录入人列表
      this.creator = res
    },
    // ◆获取二级目录、标签列表的函数(学科选择了以后，才会触发它们)
    async subjChangeHandler () {
      // *1.二级目录(注意传 ID 的形式：subjectID: this.filterForm.subjectID )
      // 1.1发送ajajx 获取 二级目录
      const { data: res1 } = await cataSimple({
        subjectID: this.filterForm.subjectID
      })
      console.log(res1, '二级目录')
      // console.log(this.filterForm.subjectID)
      // 1.2赋值给 catalog
      this.catalog = res1
      // *2.标签
      // 2.1.发送ajajx
      const { data: res2 } = await tagSimple(this.filterForm.subjectID)
      console.log(res2, '这是获取的标签11121')
      // 2.2赋值给标签列表
      this.tags = res2
    },
    // ◆点击了搜索筛选数据按钮
    searchQuesHandler () {
      console.log(this.requestParams, '筛选前的参数123')
      // 把筛选出来的数据 赋值给 查询参数
      for (const key in this.filterForm) {
        if (this.filterForm[key] !== '') {
          this.requestParams[key] = this.filterForm[key]
        }
      }
      // console.log(this.filterForm, '删除了对象中的空属性')
      // 把筛选出来的值赋值给查询参数
      // this.requestParams = Object.assign(this.filterForm, this.requestParams)
      // console.log(this.requestParams, '筛选222')
      console.log(this.requestParams, '筛选条件222')
      // 重新获取筛选后的基础题库列表
      this.loadBaseQuestionList()
    },
    // async searchQuesHandler () {
    //   // 把筛选出来的数据 赋值给 查询参数
    //   this.requestParams = this.filterForm
    //   console.log(this.requestParams, '筛选222')
    //   this.loadBaseQuestionList()
    // },
    // ◆点击清除表单筛选按钮
    clearFilterHandler () {
      // this.$refs.filterRef.resetFields()???为什么不起作用
      // 1.清除了表单
      this.filterForm = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        keyword: '', // 关键字
        creatorID: '', // 录入人
        difficulty: '', // 难度
        tags: '', // 标签
        questionType: '', // 试题类型
        direction: '', // 方向
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: '' // 区域
      }
      this.requestParams = {
        page: 1,
        pagesize: 10
      }
      // 2.重新加载基础题库列表
      this.loadBaseQuestionList()
    }
  }
}
</script>

<style scoped lang="scss">
// 表头按钮的样式
.btn_wrapper {
  display: flex;
  margin-bottom: 15px;
  justify-content: space-between;
  align-items: center;
}
// 表单的样式
.filterform-style {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

// 表格的样式
el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-right: 10px;
}
// 分页的样式
.pagination {
  margin-top: 10px;
  text-align: right;
}

// 显示消息几条的样式
.alert {
  margin: 10px 0px;
}
// 预览区域
.prevheader-style {
  display:flex;
  flex-wrap:wrap;
  span {
  width:25%;
  margin-right:15px
}
// ::v-deep .video-style {
//   width: 400px;
//   height: 300px;
// }
// ::v-deep video {
//     width:  400px;
//     height: 400px;
//   }
// }
// 预览底部
.prevfooter-style {
  margin-top: 5px;
  text-align: right;
 }
}
</style>
